<template>
  <div>
    <Header title="注册"><i class="el-icon-arrow-left" @click="$global.goPage('/login')"></i></Header>
    <el-container>
      <el-form :model="RegisterForm" :rules="RegisterRules" ref="RegisterFormRef">
        <el-form-item prop="username" >
          <el-input placeholder="请输入用户名" v-model="RegisterForm.username" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input placeholder="请输入密码" v-model="RegisterForm.password" prefix-icon="iconfont icon-lock_fill" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input placeholder="确认密码" type="password" v-model="RegisterForm.checkPass" prefix-icon="iconfont icon-lock_fill" show-password></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input v-model="RegisterForm.email" placeholder="邮箱" prefix-icon="el-icon-chat-line-square"></el-input>
        </el-form-item>
        <el-form-item prop="mobile">
          <el-input v-model="RegisterForm.mobile" placeholder="手机号" prefix-icon="el-icon-mobile"></el-input>
        </el-form-item>
        <el-button type="primary" @click="register">注册</el-button>
      </el-form>
    </el-container>
  </div>
</template>

<script>
  import Header from "../../components/Header";
  import {mapState} from 'vuex'
    export default {
        name: "register",
      data(){
          return{
            RegisterForm:{username:'',
              password:'',
              checkPass:'',email:'',mobile:''}
          }
      },
      components:{
          Header
      },
      computed:{...mapState({RegisterRules: state=>state.UserRules})},
      created() {
        this.$store.commit('checkpass',this.RegisterForm)
      },
      methods:{
        register(){
            this.$refs.RegisterFormRef.validate( async (valid) => {
              if (valid) {
                const res = await this.$http.post('api/user/add', {username:this.RegisterForm.username,
                  password:this.RegisterForm.password,
                  email:this.RegisterForm.email,mobile:this.RegisterForm.mobile})
                if (res.data.status !== 200) {
                  return this.$message.error(res.data.msg)
                }
                this.$message.success('注册成功')
                this.$router.push("./login")
                this.reset()
              } else {
                return this.$message.error('请填写完整的用户信息')
              }
            })
        },
        reset(){
          this.$refs.RegisterFormRef.resetFields();
        }
      }
    }
</script>

<style scoped>
  .el-form{
    text-align: center;
  }
  .el-button{
    width: 150px;
    margin: 0 auto;
  }
</style>
